<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
        <!-- 这时， message 并不是实时改变的，而是在失焦或按回车时才更新。 -->
        <input type="text" v-model.lazy="message"></input>
        <p>{{message}}</p>
        <!-- 修饰符.number可以将输入转换为 Number类型，否则虽然你输入的是数字，但它的类型string -->
        <input type="number" v-model.number="message"></input>
        <p>{{ typeof message}}</p>
        <!-- .trim 可以自动过滤输入的首尾空格 -->
        <input type="text" v-model.trim="message"></input>
        <p>{{message}}</p>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        // 变量app表示一个vue实例
        var app = new Vue({
            el: '#app', //用于指定一个页面中存在的Dom元素来挂载Vue示例。挂载成功后可以使用app.$el来访问该元素
            data: {
                message: ''
            }
        })
    </script>
</body>
</html>